<template>
  <div>
    <a-comment id="comment-area">
      <a-avatar slot="avatar" :src="avator" :alt="blog.user ? blog.user.userName : ''" />
      <div slot="content">
        <a-form-item>
          <a-textarea :placeholder="blog.user ? '@' + blog.user.userName : ''" :rows="4" v-model="content" />
        </a-form-item>
        <a-form-item>
          <a-button
              html-type="submit"
              :loading="submitting"
              type="primary"
              @click="handleSubmit"
          >添加留言</a-button>
        </a-form-item>
      </div>
    </a-comment>
  </div>
</template>

<script>
import {addComment} from "@/api/blog";
import encry from "@/utils/encryUtil";

export default {
  name: "CommentArea",
  data() {
    return {
      content: "",
      submitting: false
    };
  },
  props: {
    replyMsgUsername: "",
    blog:{},
    avator:''
  },
  methods: {
    handleSubmit() {
      if (!this.content) {
        return;
      }
      this.submitting = true;
      const {content, blog} = this;
      const param = {
        commnetContent: content,
        blogId: blog.blogId
      };
      addComment(param).then(res => {
          if (res.code === 200){
            this.submitting = false;
            this.content = "";
            this.$emit('reload');
            this.$message.success("评论成功");
            this.$router.push({
              name:'blogDetail',
              params:{
                blogId:encry.encry(this.blog.blogId)
              }
            })
          } else {
            this.$message.error(res.msg);
          }
      }).catch(error => {
        this.$message.error("系统错误");
      })
    },
    handleChange(e) {
      this.value = e.target.value;
    }
  }
}
</script>

<style scoped>

</style>
